<template>
  <div class="wrap" v-loading.body="loading">
    <el-card>
      <div v-if="title">
        <span style="line-height: 2rem;">{{title}}</span>
      </div>
      <div>
        <slot name="dataView"></slot>
      </div>
    </el-card>
  </div>
</template>
<style>

</style>
<script>
  export default {
    data () {
      return {
        resourceData: null,
        loading: false
      }
    },
    props: ['title', 'resourceUri', 'resourceId', 'resourceName'],
    methods: {
      fetchData () {
        let vm = this
        vm.loading = true

        this.$http.get(vm.resourceUri + '/' + vm.resourceId).then((response) => {
          response.json().then((response) => {
            vm.resourceData = response
            vm.$emit('fetched', vm.resourceData)
            vm.loading = false
          })
        }).catch((response) => {
          this.dealWithError(response.status)
        })
      },
      patchData (patchData) {
        let vm = this
        vm.loading = true

        this.$http.patch(vm.resourceUri + '/' + vm.resourceId, patchData).then((response) => {
          response.json().then((response) => {
            vm.resourceData = response
            vm.$emit('patched', vm.resourceData)
            vm.loading = false
            vm.$message('操作成功')
          })
        }).catch((response) => {
          this.dealWithError(response.status)
        })
      },
      postData (postData) {
        let vm = this
        vm.loading = true

        this.$http.post(vm.resourceUri, postData, {
          headers: {
            Authorization: vm.$store.state.login.authorization
          }
        }).then((response) => {
          response.json().then((response) => {
            vm.resourceData = response
            vm.$emit('posted', vm.resourceData)
            vm.loading = false
            vm.$message('操作成功')
          })
        }).catch((response) => {
          this.dealWithError(response.status)
        })
      },
      deleteData () {
        let vm = this
        vm.loading = true

        this.$http.delete(vm.resourceUri + '/' + vm.resourceId).then((response) => {
          response.json().then((response) => {
            vm.resourceData = null
            vm.$emit('deleted')
            vm.loading = false
          })
        }).catch((response) => {
          this.dealWithError(response.status)
        })
      }
    },
    dealWithError (status) {
      let message = status + ': '
      switch (status) {
        case 400:
          message += '参数错误'
          break
        case 401:
          message += '未登陆'
          break
        case 403:
          message += '拒绝访问'
          break
        case 404:
          message += '资源不存在'
          break
        case 409:
          message += '资源冲突'
          break
        case 500:
          message += '服务器错误'
          break
        case 502:
          message += '服务器无响应'
          break
        case 503:
          message += '服务器过载'
          break
        default:
          message += '网络错误'
      }

      this.$message(message)
      this.loading = false
    },
    created () {
      if (this.resourceId) {
        this.fetchData()
      } else {
        this.loading = false
      }
    },
    watch: {
      // 如果 resourceUri 发生改变，这个函数就会运行
      resourceId: function (newResourceId) {
        this.fetchData()
      }
    }
  }
</script>
